<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${title} + ' - 王氏美容汽车集团管理系统'">功能模块 - 王氏美容汽车集团管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            --secondary-gradient: linear-gradient(135deg, #ffd700 0%, #ffb347 100%);
            --royal-gold: #ffd700;
        }

        body {
            background: var(--primary-gradient);
            min-height: 100vh;
            font-family: 'Microsoft YaHei', 'Segoe UI', sans-serif;
            position: relative;
        }

        body::before {
            content: '';
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="crown" patternUnits="userSpaceOnUse" width="100" height="100"><path d="M20,80 L30,60 L40,70 L50,50 L60,70 L70,60 L80,80 Z" fill="none" stroke="rgba(255,215,0,0.05)" stroke-width="1"/></pattern></defs><rect width="100" height="100" fill="url(%23crown)"/></svg>') repeat;
            opacity: 0.3;
            z-index: -1;
        }

        .navbar {
            background: rgba(0,0,0,0.2) !important;
            backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(255,255,255,0.1);
        }

        .navbar-brand {
            color: var(--royal-gold) !important;
            font-weight: 700;
            font-size: 1.3rem;
        }

        .nav-link {
            color: rgba(255,255,255,0.9) !important;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-link:hover, .nav-link.active {
            color: var(--royal-gold) !important;
            transform: translateY(-1px);
        }

        .module-card {
            background: rgba(255, 255, 255, 0.95);
            border: none;
            border-radius: 20px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            height: 100%;
            backdrop-filter: blur(10px);
            overflow: hidden;
        }

        .module-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
        }

        .module-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 4px;
            background: var(--secondary-gradient);
        }

        .module-icon {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1.5rem;
            font-size: 2.5rem;
            color: white;
            background: var(--secondary-gradient);
            position: relative;
        }

        .hero-section {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 25px;
            padding: 3rem;
            margin-bottom: 3rem;
            color: white;
            text-align: center;
            border: 1px solid rgba(255,255,255,0.1);
        }

        .feature-badge {
            background: rgba(255, 215, 0, 0.2);
            color: var(--royal-gold);
            border: 1px solid rgba(255, 215, 0, 0.3);
            border-radius: 20px;
            padding: 0.4rem 1.2rem;
            font-size: 0.9rem;
            margin: 0.3rem;
            font-weight: 500;
        }

        .btn-back {
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.2);
            color: white;
            border-radius: 15px;
            padding: 0.7rem 1.5rem;
            transition: all 0.3s ease;
            font-weight: 600;
        }

        .btn-back:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--royal-gold);
            color: var(--royal-gold);
            transform: translateY(-2px);
        }

        .tech-feature {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 1.5rem;
            text-align: center;
            transition: all 0.3s ease;
        }

        .tech-feature:hover {
            background: rgba(255, 255, 255, 0.15);
            transform: translateY(-5px);
        }

        .btn-light {
            background: rgba(255, 255, 255, 0.9);
            border: none;
            color: #333;
            font-weight: 600;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .btn-light:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(255, 255, 255, 0.3);
        }

        .btn-outline-light {
            border: 2px solid rgba(255, 255, 255, 0.5);
            color: white;
            font-weight: 600;
            border-radius: 10px;
            transition: all 0.3s ease;
        }

        .btn-outline-light:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: white;
            color: white;
            transform: translateY(-2px);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/">
                <i class="fas fa-crown me-2"></i>王氏美容汽车集团
            </a>
            <div class="navbar-nav ms-auto">
                <a href="/" class="btn btn-back">
                    <i class="fas fa-arrow-left me-2"></i>返回首页
                </a>
                <a href="/dashboard" class="btn btn-back ms-2">
                    <i class="fas fa-tachometer-alt me-2"></i>管理后台
                </a>
            </div>
        </div>
    </nav>

    <div class="container mt-4">
        <!-- 英雄区域 -->
        <div class="hero-section">
            <h1 class="display-4 mb-3">
                <i class="fas fa-cogs me-3"></i>功能模块介绍
            </h1>
            <p class="lead">
                王氏美容汽车集团管理系统提供全方位的汽车美容服务管理解决方案
            </p>
            <div class="mt-3">
                <span class="feature-badge">智能化管理</span>
                <span class="feature-badge">数据驱动</span>
                <span class="feature-badge">高效运营</span>
                <span class="feature-badge">客户至上</span>
            </div>
        </div>

        <!-- 功能模块 -->
        <div class="row g-4">
            <!-- 客户管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-users"></i>
                        </div>
                        <h5 class="card-title">客户管理</h5>
                        <p class="card-text text-muted">
                            全面的客户信息管理，包括会员等级、积分余额、消费记录等
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>客户档案管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>会员等级体系</li>
                            <li><i class="fas fa-check text-success me-2"></i>积分余额管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>消费记录追踪</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 材料管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-boxes"></i>
                        </div>
                        <h5 class="card-title">材料管理</h5>
                        <p class="card-text text-muted">
                            智能库存管理，实时监控材料使用情况和库存预警
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>库存实时监控</li>
                            <li><i class="fas fa-check text-success me-2"></i>自动预警提醒</li>
                            <li><i class="fas fa-check text-success me-2"></i>供应商管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>成本控制分析</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 报表管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-chart-bar"></i>
                        </div>
                        <h5 class="card-title">报表管理</h5>
                        <p class="card-text text-muted">
                            多维度数据分析，为经营决策提供科学依据
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>营收统计分析</li>
                            <li><i class="fas fa-check text-success me-2"></i>客户行为分析</li>
                            <li><i class="fas fa-check text-success me-2"></i>服务效率统计</li>
                            <li><i class="fas fa-check text-success me-2"></i>自定义报表</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 美容项目管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-spa"></i>
                        </div>
                        <h5 class="card-title">美容项目管理</h5>
                        <p class="card-text text-muted">
                            标准化服务项目管理，提升服务质量和效率
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>服务项目定义</li>
                            <li><i class="fas fa-check text-success me-2"></i>价格体系管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>服务流程标准</li>
                            <li><i class="fas fa-check text-success me-2"></i>质量评估体系</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 门店业务管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-store"></i>
                        </div>
                        <h5 class="card-title">门店业务管理</h5>
                        <p class="card-text text-muted">
                            多门店统一管理，实现业务流程标准化
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>多门店管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>员工权限控制</li>
                            <li><i class="fas fa-check text-success me-2"></i>业务流程管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>绩效考核体系</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 费用管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-calculator"></i>
                        </div>
                        <h5 class="card-title">费用管理</h5>
                        <p class="card-text text-muted">
                            精细化成本控制，提升经营效益和盈利能力
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>成本分类管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>费用预算控制</li>
                            <li><i class="fas fa-check text-success me-2"></i>财务报表生成</li>
                            <li><i class="fas fa-check text-success me-2"></i>盈利分析报告</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 胶水管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-flask"></i>
                        </div>
                        <h5 class="card-title">胶水管理</h5>
                        <p class="card-text text-muted">
                            专业化学品管理，确保使用安全和效果最佳
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>化学品分类管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>安全使用规范</li>
                            <li><i class="fas fa-check text-success me-2"></i>有效期监控</li>
                            <li><i class="fas fa-check text-success me-2"></i>使用量统计</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 库存管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-warehouse"></i>
                        </div>
                        <h5 class="card-title">库存管理</h5>
                        <p class="card-text text-muted">
                            智能化库存管理，优化资金使用效率
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>入库出库管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>库存盘点功能</li>
                            <li><i class="fas fa-check text-success me-2"></i>智能补货提醒</li>
                            <li><i class="fas fa-check text-success me-2"></i>库存周转分析</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 字典管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-book"></i>
                        </div>
                        <h5 class="card-title">字典管理</h5>
                        <p class="card-text text-muted">
                            系统基础数据管理，确保数据标准化和一致性
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>基础数据维护</li>
                            <li><i class="fas fa-check text-success me-2"></i>数据标准化</li>
                            <li><i class="fas fa-check text-success me-2"></i>系统配置管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>数据一致性保证</li>
                        </ul>
                    </div>
                </div>
            </div>

            <!-- 充值余额管理 -->
            <div class="col-lg-4 col-md-6">
                <div class="card module-card">
                    <div class="card-body text-center p-4">
                        <div class="module-icon">
                            <i class="fas fa-credit-card"></i>
                        </div>
                        <h5 class="card-title">充值余额管理</h5>
                        <p class="card-text text-muted">
                            会员充值管理，提升客户粘性和现金流
                        </p>
                        <ul class="list-unstyled text-start">
                            <li><i class="fas fa-check text-success me-2"></i>充值套餐管理</li>
                            <li><i class="fas fa-check text-success me-2"></i>余额消费记录</li>
                            <li><i class="fas fa-check text-success me-2"></i>充值优惠活动</li>
                            <li><i class="fas fa-check text-success me-2"></i>资金流水管理</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <!-- 技术特色 -->
        <div class="row mt-5">
            <div class="col-12">
                <div class="hero-section">
                    <h3 class="mb-4">
                        <i class="fas fa-cogs me-3"></i>技术特色
                    </h3>
                    <div class="row g-4">
                        <div class="col-md-3">
                            <div class="tech-feature">
                                <i class="fas fa-cloud fa-3x mb-3" style="color: var(--royal-gold);"></i>
                                <h6 class="fw-bold">云端部署</h6>
                                <small>支持云端部署，随时随地访问系统</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="tech-feature">
                                <i class="fas fa-mobile-alt fa-3x mb-3" style="color: var(--royal-gold);"></i>
                                <h6 class="fw-bold">响应式设计</h6>
                                <small>完美适配各种设备屏幕尺寸</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="tech-feature">
                                <i class="fas fa-shield-alt fa-3x mb-3" style="color: var(--royal-gold);"></i>
                                <h6 class="fw-bold">安全可靠</h6>
                                <small>多层安全防护，数据安全有保障</small>
                            </div>
                        </div>
                        <div class="col-md-3">
                            <div class="tech-feature">
                                <i class="fas fa-rocket fa-3x mb-3" style="color: var(--royal-gold);"></i>
                                <h6 class="fw-bold">高性能</h6>
                                <small>优化的系统架构，响应迅速</small>
                            </div>
                        </div>
                    </div>
                    <div class="mt-5">
                        <a href="/login" class="btn btn-light btn-lg me-3">
                            <i class="fas fa-sign-in-alt me-2"></i>立即体验
                        </a>
                        <a href="/" class="btn btn-outline-light btn-lg me-3">
                            <i class="fas fa-home me-2"></i>返回首页
                        </a>
                        <a href="/dashboard" class="btn btn-outline-light btn-lg">
                            <i class="fas fa-tachometer-alt me-2"></i>管理后台
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
